<template>
	<layout>
		<u-navbar title="更多评论" :background="{ 'background-image': 'linear-gradient(to right, #434AD8, #8E77F5)' }"
			:borderBottom="false" backIconColor="#fff" titleColor="#fff">
		</u-navbar>
		<view>
			<view v-if="list.length" class="pad-base">
				<view v-for="(item,idx) in list" :key="idx" class="card-gray mg-b-base">
					<view class="h-box">
						<u-image :src="item.avatar" width="90rpx" height="90rpx" border-radius="45rpx"></u-image>
						<view class="mg-l-sm">
							<view class="uni-text-big">{{item.nickname || '微信用户'}}</view>
							<u-rate :count="5" :size="30" :value="item.score" gutter="5" disabled></u-rate>
							<text class="uni-text-gray text-sm mg-l-xs">{{$formatTime(item.createTime)}}</text>
						</view>
					</view>
					<view class="card-content u-line-3">
						{{item.description || ''}}
					</view>
				</view>
				<uni-load-more :status="loadingStatus"></uni-load-more>
			</view>
			<view v-else class="pad-base">
				<u-empty></u-empty>
			</view>
		</view>
	</layout>
</template>

<script>
	import {
		getEvaluationPage
	} from "@/api/platform/goods.js"
	export default {
		data() {
			return {
				scriptId: '',
				goodsId: '',
				roomId: '',
				list: [],
				loadingStatus: 'more',
				pageNum: 0,
				pageSize: 20,
				total: 0
			}
		},
		onLoad(e) {
			this.scriptId = e.scriptId
			this.goodsId = e.goodsId
			this.storeId = e.storeId
		},
		async onPullDownRefresh() {
			await this.reload()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.loadMore({})
		},
		onReady() {
			this.reload()
		},
		methods: {
			async reload() {
				if (this.loadingStatus == 'loading') {
					return
				}
				this.list = []
				this.pageNum = 0
				this.total = 0
				this.loadingStatus = 'more',
				await this.loadMore({})
			},
			async loadMore({showLoading = true}) {
				if (this.loadingStatus == 'loading' || this.loadingStatus == 'noMore') {
					return
				}
				let prevStatus = this.loadingStatus
				this.loadingStatus = 'loading'
				uni.showLoading({
					mask: true
				})
				try{
					let params = {
						showLoading: false,
						pageNum: this.pageNum + 1
					}
					if (this.scriptId) {
						params.scriptId = this.scriptId
					} else if (this.goodsId) {
						params.goodsId = this.goodsId
					} else if (this.storeId) {
						params.storeId = this.storeId
					}
					let page = await getEvaluationPage(params)
					if (this.pageNum == 0) {
						this.total = page.total
					}
					if (page.list.length) {
						this.list = this.list.concat(page.list)
						this.pageNum++
					}
					if (this.list.length == this.total) {
						this.loadingStatus = 'noMore'
					} else {
						this.loadingStatus = 'more'
					}
					uni.hideLoading()
				}catch(e){
					uni.hideLoading()
					this.loadingStatus = prevStatus
					console.error(e)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card-gray {
		background: #F9F9F9;
		border-radius: 16px 16rpx 16rpx 16rpx;
		padding: 20rpx;
		
		.card-content {
			font-size: 24rpx;
			color: #5C5C5C;
			line-height: 28rpx;
			margin-top: 12rpx;
		}
	}
</style>
